<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" />
      <button @click="search">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  methods: {
    search() {
      // 1. path路径跳转
      /**
       方式1: 
       this.$router.push('路由路径') 
       方式2:
       this.$router.push({
         path: '路由路径'
       })  

       跳转传参:
       ------查询参数传参-------
       方式1: 
       this.$router.push('路由路径?参数名=参数值')
       方式2:
       this.$router.push({
         path: '路由路径',
         query: {
           参数名1: 参数值1,
           参数名2: 参数值2
           ...
         }
       })  

       ----动态路由传参----
        方式1: 
       this.$router.push('/路由路径/参数值')
       方式2:
       this.$router.push({
         path: '/路由路径/参数值',
       })  
      */
      // this.$router.push("/search?name=张三&age=18");
      // this.$router.push({
      //   path: "/search",
      //   query: {
      //     name: "李四",
      //     age: 20,
      //   },
      // });
      // --------------------------------
      // this.$router.push("/search/黑马");
      // this.$router.push({
      //   path: "/search/黑马6666",
      // });
      /**
        
        ------------------------
      
       */
      // 2. name命名路由跳转
      /**
       方式一: query传参
       this.$router.push({
         name: '路由名',
         query: {
           参数名1: 参数值1,
           ....
         }
       }) 

       方式二: 动态路由传参
       this.$router.push({
         name: '路由名',
         params: {
           参数名: 参数值
         }
       })
      */
      // this.$router.push({
      //   name: "search",
      //   query: {
      //     words: "黑马",
      //     address: "北京",
      //   },
      // });

      this.$router.push({
        name: "search",
        params: {
          words: "黑马",
        },
      });
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>